<template>
  <!-- vue和vue3,区别一  vue3不用写根标签 -->
  <h1>哈哈哈</h1>
  <h2>拉拉</h2>
  <p>你要看什么:{{ msg }}</p>
  <p>年龄:{{ props.age }}</p>
  <button @click="setMsg">修改msg</button>
  <button @click="setAge">修改年龄</button>
</template>

<script>
import { ref, reactive } from "vue"
export default {
  name: "App",
  setup() {
    // console.log(this)
    // 在setup中拿不到this,因为他的执行时机非常早
    // vue3写法,需要使用setup中定义数据,且需要声明变量,和return出去,可以使用vue2的写法,但是不推荐
    let msg = ref("拉拉阿拉")
    let props = reactive({
      name: "123",
      age: 1,
    })

    // 特点二:不需要单独在methods中写修改函数,直接在setup中写,然后向外return,实现比vue跟便捷的响应式
    // 1.简单数据类型使用ref来进行响应式

    // 修改消息
    function setMsg() {
      // 在实现响应式时,需要注意两点,一引入ref,并且在基本数据类型中使用,二在修改函数中,需要使用msg.value这种形式去修改.并且向外return
      msg.value = "门卡拉克"
      // 除了value的修改值的方法外,还能通过this的方式
      // 在函数中,可以使用this来拿到数据
      console.log(msg)
    }
    function setAge() {
      // console.log($event)
      // console.log(a) 事件对象
      // a就是事件对象
      console.log(props)
      // 后面可以昂refImpl这样的格式,被称为ref数据, 就是相当于此数据是响应式,内部进行了处理
      // RefImpl是一种这样的对象格式
      // ref:refrence是标识引用的意识
      // Impl:implemnt实现

      props.age += 1
    }
    return {
      msg,
      props,
      setMsg,
      setAge,
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
